<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>焦点学苑</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">

<!-- 引入JQuery -->
<script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- vue -->
<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<!-- axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<!-- 引入页头组件 -->
<script src="js/top.js"></script>
<script src="js/category.js"></script>
</head>

<body>
<div id="postf111">
<div class="head-box">
    <div class="head wrap">
          <div class="logo fl"><a href=""><img src="images/logo.png"></a></div>
          <div class="head-right fr">
              <div class="head-a fr">
                   <div class="hgt fl"><img src="images/hgt.png">
                         <div class="hgt-top">
                             <input type="text" class="hgt-text">
                         </div>
                   </div>
              
              </div>
              <top></top>
              <div class="clearfix"></div>
              <div class="nav fr">
                  <ul>
                       <li><a href="index.html">首页</a></li>
                       <li><a href="">文章</a>
                           <category></category>
                       </li>
                       <li class="nav-cut"><a href="community.html">社区</a></li>
                       <li><a href="course.html">课程</a></li>
                       <li><a href="active.html">活动</a></li>
                       <li><a href="contact.html">联系我们</a></li>
                  
                  </ul>
              </div>
              <div class="clearfix"></div>
          </div>
    </div>
</div>


<div class="content">
    <div class="wrap">
            <div class="art-height"></div>
            <div   class="post">
                   <div v-for="i in list" class="post-fl fl">
                         <div  class="post-a1">{{i.pname}}</div>
                         <div class="post-a2">{{i.uname}}<span>{{i.pdate}}</span>
                                               <div class="col-c">
                                                    <span><img src="images/col-c1.jpg">0</span>
                                                    <span><img src="images/col-c2.jpg">3</span>
                                                    <em><img src="images/col-c3.jpg"></em>
                                                    <em><img src="images/col-c4.jpg"></em>
                                                    <em><img src="images/col-c5.jpg"></em>
                                                </div>
                         </div>
                         <div class="adiv">{{i.pcontent}}</div>
                         
                         <div class="det-b">
                                 <div class="det-title"><img src="images/cou-b1.jpg">在线评论</div>
                                 <div class="det-b1">
                                      <textarea v-model="rps.rcontent" class="det-area post-area"></textarea>
                                      <div v-if="!rps.uname" class="det-b2">评论请先登录</div>
                                 </div>
                                 <div class="det-b3"><input @click="checkLogin" type="button" class="det-btn" value="评论"></div>
                          </div>
                         <div class="skt">
                 <div class="skt-title">
                       <span class="skt-cut">默认评论</span><em>|</em><span>最新评论</span>
                 </div>
                 <div class="skt-tab">
                          <div class="skt-btm">
                               <ul class="skt-ul">
                                     <li v-for="r in comments">
                                            <div class="skt-a1"><img :src="r.ujpg">{{r.uname}}<div>{{r.rtime}}</div>
                                                                <div class="menu"><a href=""><img src="images/menu.jpg"></a></div></div>
                                            <div class="skt-a2">{{r.rcontent}}</div>
                                            <div class="skt-a3"><a href=""><img src="upload/det-b.jpg">我要点评</a>
                                                    <div class="menu-a"><img src="images/menu-a1.jpg">0
                                                                        <span><img src="images/menu-a2.jpg">0</span></div>
                                            </div>
                                     </li>  
                               </ul>
                               <div class="skt-more"><a href="">查看更多</a></div>
                          </div>
                      
                          <div class="skt-btm hide">
                               
                          </div>
                 </div>
           </div>      
                   </div><!--post-fl-->
                  
                   <div class="post-fr fr">
                           <div class="post-r">
                                   <div class="post-r1"><img src="upload/post-a1.jpg"></div>
                                   <div class="post-r2">shuiguodaren</div>
                                   <div class="post-r3">20篇文章<span>|</span>35条评论</div>
                                   <div class="post-r4"><a href="">+关注</a><span>|</span><a href="">私信</a></div>
                           </div>
                           <div class="post-t"><a href=""><img src="upload/gg1.jpg"></a></div>
                           <div class="post-y">
<!--                                  <div class="post-y1"><img src="images/cou-b1.jpg">推荐帖子</div> -->
                                 <ul>
<!--                                       <a href=""><li> -->
<!--                                            <div class="post-y2"><img src="upload/post-a4.png"></div> -->
<!--                                            <div class="post-y3">追妹子，你准备好了吗？</div> -->
                                      
<!--                                       </li></a> -->
                                      
                                 </ul>
                           </div>
                   </div>
            </div>
    </div>      
</div>

<!--登录注册弹窗-->
<div class="mask"></div>
<div class="login">
    <div class="login-title">
        <div class="login-a">登录</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input v-model="user.uname" type="text" class="login-text" placeholder="注册时填写的用户名"></div>
        <div class="login-d"><input v-model="user.upass" type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input @click.prevent="login"  type="button" class="login-btn" value="登录"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
             <span>还没有焦点账号?><a href="javascript:;" class="reg-href">点击注册</a></span>
        </div>
    </div>
</div>

<div class="reg">
    <div class="login-title">
        <div class="login-a">注册</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input v-model="user.uname" type="text" class="login-text" placeholder="用户名"></div>
        <div class="login-d"><input v-model="user.upass" type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input @click.prevent="regist" type="button" class="login-btn" value="注册"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
        </div>
    </div>
</div>



</div>

                   <script>
                   var v5 = new Vue({
                	  el : "#postf111",
                	  data : {
                		  list : [],
                		  rps : {
                			  uname : "",
                			  rcontent : "",
                			  pid : ""
                		  },
                		  comments : [],
                		  user:{uname:"",upass:""},
//                 		  pid : "",

                	  },
                	  created(){
	               		   axios.get("post/detailPost.s?pid=" + location.hash.substring(1)).then(res=>{
	               			  // console.info("=-=-=-"+this.pid);
	               			   this.list = res.data;
// 	               			   console.info(res.data);
	               		   });
	               		   axios.get("getloginUser.s").then(res=>{
	               			   this.rps.uname = res.data;
	               		   });
	               		   axios.get("reply/selectPost.s?pid="+location.hash.substring(1)).then(res=>{
	    					   this.comments=res.data;
	    					});
	               	   },
	               	   methods :{
	               		   comment(){
		               			var params = new URLSearchParams();
		        				params.append("uname",this.rps.uname);
		        				params.append("rcontent",this.rps.rcontent);
		        				params.append("pid",location.hash.substring(1));
		        				axios.post("reply/insertPost.s",params).then(res=>{
		        					if(this.rps.rcontent==""||this.rps.rcontent==null){
		        						alert("评论内容不能为空")
		        					}else{
		        						alert("评论成功！")
		        						axios.get("reply/selectPost.s?pid="+location.hash.substring(1)).then(res=>{
		     	    					   this.comments=res.data;
		     	    					});
		        					}
		        				})
	               		   },
	               		   
	               		login(){
	           				console.info("xx");
	           				var params = new URLSearchParams();
	           				params.append("username",this.user.uname);
	           				params.append("password",this.user.upass);
	           				
	           				axios.post("userHead.s",params).then(res=>{
	           					
	           					console.log(res.data)
	           					this.jpg=res.data.ujpg;
	           				});
	           				axios.post("user/login.s",params).then(res=>{
	           					 if(res.data.code){
	           							//关闭div
	           							$(".mask,.login").css("display", "none");
	           							$("#loginA").hide();
	           						}else{
	           							$(".mask,.login").css("display", "none");
	           							alert("登陆成功");
	           							$("#fabiao").hide();
	           						} 
	           				})
	           			},
	           			checkLogin(){
	        				var params = new URLSearchParams();
	        				console.info("dasfsa");
	        				axios.post("checkLogin.s",params).then(res=>{
	        					if((res.data.code)==0){
	        						//$(".mask,.login").show();
	        						
	        					        $(".mask").css({
	        					            display: "block", height: $(document).height()
	        					        });
	        							 var $box = $('.login');
	        					        $box.css({
	        					           display: "block"
	        					        });
	        							$(".close").click(function () {
	        					        $(".mask,.login").css("display", "none");
	        					       });

	        					}else{
	        						this.comment();
	        					}
	        				})
	        			},
	               		   
	               	   }

                   });
                   </script>




<div class="footer">
   <div class="wrap">
      <div class="foot">
            <div class="foot-left fl">
                 <a href="">关于我们</a>
                 <a href="">加入我们</a>
                 <a href="contact.html">联系我们</a>
                 <a href="">媒体采访</a>
            </div>
            <div class="foot-c fl"><a href=""><img src="images/foot-logo.jpg"></a></div>
            <div class="foot-right fr">
                 <a href="">同城活动</a>
                 <a href="">课程资讯</a>
                 <a href="">最新发布</a>
                 <a href="">热门文章</a>
            </div>
       </div> 
       <div class="foot-btm">网页制作by云邦</div>    
   </div>
</div>




<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/Action.js"></script>
<script>
    $(".skt-title span").click(function(){
		 $(this).addClass("skt-cut").siblings().removeClass("skt-cut"),
		 $(".skt-tab .skt-btm").hide().eq($(".skt-title span").index(this)).show()
    })
</script>
</body>
</html>

